<template>
  <el-form-item class="edit-item edit-item-slider slider-normal" :label="label">
    <el-slider 
      v-model="modelValue"
      :min="min"
      :max="max"
      :step="step"
      :disabled="disabled"
      :show-input="true"
      :show-input-controls="false"
      @change="onChange">
    </el-slider>
    <span v-if="unit">{{unit}}</span>
  </el-form-item>
</template>

<script>
  export default {
    emits: ['change','update:modelValue'],
    props: {
      label: String,
      modelValue: [String, Number],
      min: {
        type: Number,
        default: 0,
      },
      max: {
        type: Number,
        default: 1,
      },
      step: {
        type: Number,
        default: 0.1,
      },
      disabled: {
        type: Boolean,
        default: false,
      },
      unit: {
        type: String,
        default: '',
      },
    },
    methods: {
      onChange(val) {
        this.$emit('update:modelValue', val);
        this.$emit('change');
      },
    }
  }
</script>
